﻿@model Yunwei.Web.Models.ShoppingCartsViewModel
@{
    ViewBag.Title = "Detail";
}

<style type="text/css">
    select:disabled, keygen:disabled, optgroup:disabled, option:disabled, select[disabled] > option {
    color: #b200ff;
}
</style>

<link href="~/Content/general-orders.css" rel="stylesheet" />
<link href="~/Content/public-checkout.css" rel="stylesheet" />
<link href="~/Content/checkout-header.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.zh-CN.js"></script>

<div class="d-scroll-top-box hidden-print hidden-xs hidden-sm affix-top" style="display: none" aria-hidden="true"><span class="glyphicon glyphicon-arrow-up d-scroll-top-button"></span></div>
<div class="container d-main-container">
    <div class="row text-center background-white hidden">
        <h4>正在努力加载中... ╮(￣▽￣")╭</h4>
    </div><input type="hidden" name="issubmit" value="1">
    <div class="content">
        <div class="row text-center background-white hidden">
            <h5>您还没选购任何美食哦</h5>
            <h6><a href="#">(～￣▽￣)ノ 快点击这里选购吧</a></h6>
        </div>
        <div>
            <form class="form-horizontal" name="orderForm" action="/Order/Place" method="post">
                @Html.AntiForgeryToken()

                @Html.Hidden("Restaurant_Id",Model.ShoppingCarts[0].Restaurant_Id)
                <div class="col-xs-12 col-md-8 panel-left">
                    <div class="row info-title">
                        <div class="col-xs-7 col-md-6">
                            <div class="list-title">@Model.Name</div>
                        </div>
                        <div class="col-xs-5 col-md-offset-2 col-md-3 text-center info-title">数量</div>
                    </div>
                    <hr>
                    <div class=info-block>
                        @foreach (var sc in Model.ShoppingCarts)
                        {
                            <div class="row list-item">
                                <div class="col-xs-7 col-md-6">
                                    <div class="list-thumbnail"><img src="@sc.Food.Avatar"></div>
                                    <div class="list-info">
                                        <div class="list-item-title">@sc.Food.Name</div>
                                        <div class="list-item-price">￥@sc.Food.Price</div>
                                    </div>
                                </div>
                                <div class="col-xs-5 col-md-offset-2 col-md-3 text-center list-item-quantity"><a href="javascript:;" onclick="quantitySubtract(this, @sc.Food_Id)">&nbsp;-&nbsp;</a> <input min="1" value="@sc.Total" />&nbsp; <a href="javascript:;" onclick="quantityAdd(this, @sc.Food_Id)">&nbsp;+&nbsp;</a></div>
                            </div>
                        }
                    </div>
                    <div class="info-title row">
                        <div class="hidden-xs hidden-sm col-md-5">用餐时间</div>
                        <div class="col-md-7">备注</div>
                    </div>
                    <hr>
                    <div class="info-block row">
                        <div class="col-md-5">
                            <div class="input-append date" id="datetimepicker" date-language="zh-CN" data-date="@DateTime.Now.AddMinutes(30).ToString("yyyy-MM-dd HH:mm")" data-date-format="yyyy-mm-dd hh:ii">
                                <input name="MealTime" class="form-control span2" size="16" type="text" value="@DateTime.Now.AddMinutes(30).ToString("yyyy-MM-dd HH:mm")">
                                <span class="add-on"><i class=" fa-calendar"></i></span>
                            </div>
                        </div>
                        <div class="hidden-xs hidden-sm col-md-7">
                            <input name="Remark" class="form-control" placeholder=" 留言：口味、给餐厅留言" />
                        </div>
                    </div>

                    <div class="info-title row">
                        <div class="hidden-xs hidden-sm col-md-5">选择餐位或包间</div>
                        <div class="col-md-7"></div>
                    </div>
                    <hr>
                    <div class="row info-block">
                        <div class="col-md-5">
                            @Html.DropDownList("DinnerTable_Id", Model.TableItems,new {  @class=" form-control"})
                        </div>
                        <div class="hidden-xs hidden-sm col-md-7">
                        </div>
                    </div>
                    <div class="info-title">用餐人信息</div>
                    <hr>
                    <div class="row info-block">
                        <div class="form-group col-xs-12 col-md-6">
                            <label for="BuyerName" class="col-xs-3 col-md-2">姓名：</label>
                            <div class="col-xs-9 col-md-10 has-feedback"><input class="form-control" id="BuyerName" name="BuyerName" placeholder="请输入姓名" required value="@ViewBag.User.RealName" /></div>
                        </div>
                        <div class="form-group col-xs-12 col-md-6">
                            <label for="BuyerPhone" class="col-xs-3 col-md-2">电话：</label>
                            <div class="col-xs-9 col-md-10 has-feedback"><input class="form-control" id="BuyerPhone" name="BuyerPhone" placeholder="请输入手机号" required value="@ViewBag.User.Phone" /> </div>
                        </div>
                    </div>

                    <div class="info-title">付款方式</div>
                    <hr>
                    <div class="row info-block">
                        <div id="paymentType" class="col-md-11">
                            <input type="radio" name="PayType" value="1" checked="checked" class="hidden"/>
                            <a class="payment payment-active">支付宝支付</a>
                            <input type="radio" name="PayType" value="2" class="hidden" />
                            <a class="payment">微信支付</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-3 panel-right">
                    <div class="row hidden-xs hidden-sm">
                        <div class="col-md-11 info-block">
                            <div class="item-title">菜式（<span id="itemTitle">@Model.Total</span>）</div>
                            <div class="item-value">￥<span id="itemValue">@Model.Price</span></div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-xs-11 col-md-11 info-block">
                            <div class="item-title">应付总额</div>
                            <div id="totalPrice" class="totalPrice">￥@Model.Price</div>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-xs-12 col-md-12">
                            <button class="btn btn-submit">下单</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#datetimepicker').datetimepicker({
            language: "zh-CN",
            autoclose: true,
            startDate: "@DateTime.Now.AddMinutes(30).ToString("yyyy-MM-dd HH:mm")"
        });


        $("#paymentType a").click(function () {
            $("#paymentType a").removeClass("payment-active");
            $(this).addClass("payment-active");

            $(this).prev().click();
        });

        $("#cart_icon").text(@Model.Total);
    });

    function quantitySubtract(obj, id) {

        //从购物车中删除
        $.ajax({
            url: "/ShoppingCart/Subtract",
            method: "post",
            data: {
                "Food_Id":id
            },
            dataType: "json",
            success: function (resp) {
                if (resp.Success) {
                    var cart = $("#cart_icon");
                    cart.text(parseInt(cart.text()) - 1);
                    $("#itemTitle").text(cart.text());

                    var quantity = $(obj).next();
                    if (parseInt(quantity.val()) == 1) {
                        $(obj).parent().parent().remove();
                    }
                    else{
                        quantity.val(parseInt(quantity.val()) - 1);
                    }

                    $("#totalPrice").text(resp.ErroMsg);
                    $("#itemValue").text(resp.ErroMsg);
                }
                else{
                    if (resp.ErrorCode == 222) {
                        window.location.href = "/Admin/User/Login?returnUrl=" + window.location.pathname + window.location.search;
                    }
                    else {
                        console.log("未知错误");
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    }
    function quantityAdd(obj, id) {
        var quantity = $(obj).prev();

        //添加到购物车中
        $.ajax({
            url: "/ShoppingCart/Add",
            method: "post",
            data: {
                "Food_Id":id
            },
            dataType: "json",
            success: function (resp) {
                if (resp.Success) {
                    quantity.val(parseInt(quantity.val()) + 1);

                    var cart = $("#cart_icon");
                    cart.text(parseInt(cart.text()) + 1);
                    $("#itemTitle").text(cart.text());

                    $("#totalPrice").text(resp.ErroMsg);
                    $("#itemValue").text(resp.ErroMsg);
                }
                else{
                    if (resp.ErrorCode == 222) {
                        window.location.href = "/Admin/User/Login?returnUrl=" + window.location.pathname + window.location.search;
                    }
                    else {
                        console.log("未知错误");
                    }
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });

    }
</script>